* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
#root {
    width: 100%;
    height: 100%;
}

// 一级总页面
.index {
    width: 100%;
    height: 100%;

    main {
        width: 100%;
        height: calc(100% - 50px);

        //首页页面
        .home {
            width: 100%;
            height: 100%;
            background: #EAEAEA;
            overflow: auto;
            position: relative;

            header {
                width: 100%;
                height: 260px;
                background-color: #00ACBD;
                border-radius: 0px 0px 25px 25px;
                color: #ffff;

                .headercon {
                    height: 50px;
                    width: 95%;
                }

                h3 {
                    height: 20px;
                    margin-top: 35px;
                    padding-left: 30px;
                }

                p {
                    margin-top: 10px;
                    padding-left: 30px;
                }
            }

            .area {
                width: 95%;
                height: 200px;
                border-radius: 10px;
                background: #fff;
                position: absolute;
                top: 160px;
                left: 10px;
                font-size: 20px;

                .areacon {
                    width: 90%;
                    height: 100%;
                    margin: 0 auto;
                }

                .area1 {
                    width: 100%;
                    height: 60px;
                    border-bottom: 1px solid #E6E6E6;
                    display: flex;
                    align-items: center;

                    input {
                        width: 30%;
                        text-align: center;
                    }

                    span {
                        width: 30%;
                        text-align: center;
                    }
                }

                .area2 {
                    width: 100%;
                    height: 60px;
                    border-bottom: 1px solid #E6E6E6;
                    display: flex;
                    align-items: center;

                }

                .area3 {
                    width: 100%;

                    button {
                        margin-top: 10px;
                        height: 40px;
                    }

                    .area3con {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        font-size: 12px;
                        margin-top: 5px;
                    }
                }
            }

            main {
                width: 95%;
                border-radius: 10px;
                height: calc(100% - 440px);
                margin: 0 auto;

                .swiper {
                    width: 100%;
                    height: 80px;
                    border-radius: 10px;
                    background: #fff;
                    margin-top: 105px;
                    margin-bottom: 5px;

                    .demo-swiper {
                        width: 100%;
                        border-radius: 10px;

                        .rv-swiper {
                            width: 100%;

                            img {
                                width: 100%;
                                height: 80px;
                                border-radius: 10px;
                            }
                        }
                    }

                }

                .Travel {
                    width: 100%;
                    border-radius: 10px;
                    background: #fff;

                    .Travelheader {
                        width: 100%;
                        height: 50px;
                        margin: 0 auto;
                        display: flex;
                        align-items: center;
                        border-bottom: 1px solid #E6E6E6;

                        h3 {
                            width: 85%;
                            height: 100%;
                            margin: 0 auto;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .span2 {
                                color: #999999;
                                font-size: 15px;
                                display: flex;
                                align-items: center;
                            }
                        }
                    }

                    .Travelcon {
                        width: 100%;

                        .Travelconcon {
                            width: 95%;
                            height: 100px;
                            margin: 0 auto;
                            display: flex;
                            border-bottom: 1px solid #E6E6E6;
                            justify-content: space-between;
                            align-items: center;

                            .Serial {
                                width: 15%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }

                            .raveltitle {
                                width: 50%;
                                display: flex;
                                flex-direction: column;

                                p {
                                    display: flex;
                                    margin-top: 5px;
                                    text-align: center;
                                    justify-content: space-between;
                                    color: #999999;
                                }
                            }

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }

        //订单页面
        .OrderForGoods {
            width: 100%;
            height: 100%;

            header {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            main {
                width: 100%;
                height: calc(100% - 50px);
                background-color: #F5F5F5;
                overflow: auto;
                ;

                .allcon {
                    width: 90%;
                    height: 100px;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    margin-top: 10px;
                    background-color: #ffffff;
                    border-radius: 15px;

                    .allconlet {
                        height: 100%;
                        text-align: center;
                        line-height: 25px;
                        margin-left: 10px;

                        h4 {
                            line-height: 30px;
                        }

                        p {
                            color: #656565;
                        }
                    }

                    .allconrig {
                        line-height: 25px;
                        text-align: center;
                        margin-right: 10px;

                        h4 {
                            line-height: 30px;
                            color: #FF7900;
                        }

                        .success {
                            color: #00B353;
                        }

                        .fail {
                            color: red;
                        }

                        .other {
                            color: #E6E6E6;
                        }
                    }
                }
            }
        }

        //客服页面
        .customer {
            width: 100%;
            height: 100%;
            background: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        //我的页面
        .my {
            width: 100%;
            height: 100%;
            background: #EAEAEA;

            header {
                width: 100%;
                height: 260px;
                background-color: #00ACBD;
                border-radius: 0px 0px 25px 25px;
                position: relative;

                .com {
                    width: 100%;
                    height: 200px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    .icon {
                        width: 60px;
                        height: 60px;
                        border-radius: 25px;
                        font-size: 60px;
                        text-align: center;
                    }

                    p {
                        margin-top: 5px;
                        color: #FFFFFF;
                    }
                }

                .com1 {
                    width: 95%;
                    height: 200px;
                    display: flex;
                    margin: 0 auto;

                    .icon {
                        width: 100%;
                        margin-top: 120px;
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                        color: #ffff;

                        .com1p1 {
                            display: flex;
                            align-items: center;

                            span {
                                margin-right: 10px;
                            }

                            .span1 {
                                width: 40px;
                                height: 40px;
                                border-radius: 25px;
                                font-size: 40px;
                                text-align: center;
                            }

                        }

                        .com1p2 {
                            height: 100%;
                            display: flex;
                            align-items: center;
                            margin-left: 30px;

                            span {
                                margin-right: 5px;
                            }
                        }

                    }
                }
            }

            main {
                width: 95%;
                height: 200px;
                background: #fff;
                position: absolute;
                top: 200px;
                left: 10px;
                border-radius: 10px;

                .maincon {
                    margin-top: 10px;
                }
            }
        }
    }

    footer {
        width: 100%;
        height: 50px;
    }
}

.longin {
    width: 100%;
    height: 100%;
}

// 乘客列表
.passengerList {
    width: 100%;
    height: 100%;
    background: #F5F5F5;

    header {
        width: 100%;
        height: 150px;
        background-color: #00ACBD;
        color: #FFFFFF;

        .headertop {
            width: 100%;
            height: 50px;
            display: flex;
            justify-self: center;

            span {
                width: 33%;
                display: flex;
                align-items: center;
            }

            .headertoplet {
                padding-left: 10px;
            }

            .headertopcon {
                display: flex;
                justify-content: center;
            }
        }

        .headercon {
            width: 90%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ffff;
            margin-top: 30px;

            .com1p1 {
                display: flex;
                align-items: center;

                span {
                    margin-right: 10px;
                }

                .span1 {
                    width: 40px;
                    height: 40px;
                    border-radius: 25px;
                    font-size: 40px;
                    text-align: center;
                }

            }

            .com1p2 {
                height: 100%;
                display: flex;
                align-items: center;
                margin-left: 30px;

                span {
                    margin-right: 5px;
                }
            }


        }
    }

    main {
        width: 100%;
        height: calc(100% - 230px);

        .maintop {
            height: 10px;
        }

        .button {
            width: 95%;
            margin: 0 auto;
            height: 50px;
            color: #00ACBD;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            border-radius: 25px;
            box-shadow: 0px 0px 5px 1px #ccc;
        }

        .maincon {
            width: 95%;
            margin: 0 auto;
            height: 300px;
            overflow: auto;
            border-radius: 15px;
            box-shadow: 0px 0px 5px 1px #ccc;
            background-color: #ffffff;
            margin-top: 15px;

            .maincontop {
                width: 95%;
                height: 60px;
                margin: 0 auto;
                color: #999999;
                border-bottom: 1px solid #E6E6E6;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .mainconitem {
                width: 95%;
                height: 80px;
                margin: 0 auto;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                border-bottom: 1px solid #E6E6E6;

                div {
                    p {
                        display: flex;

                        span {
                            width: 60px;
                            height: 20px;
                            color: #999999;
                            border: 1px solid #ccc;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-left: 5px;
                        }
                    }

                    .p2 {
                        color: #999999;
                    }
                }
            }
        }

        .mainfooter {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            color: #999999;
        }
    }

    footer {
        width: 100%;
        height: 80px;
        background: #F5F5F5;
    }
}

// 新增列表
.addpeoplebox {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 50px;
        background: #1ba9ba;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: space-around;

        .icon {
            flex: 0.5;
            color: #fff;
        }

        .title {
            flex: 10;
            color: #fff;
            font-size: 17px;
        }
    }

    .loginbox {
        width: 100%;
        height: 80px;
        background: #1ba9ba;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: space-around;

        .pic {
            width: 30%;
            display: flex;
            align-items: center;
            text-align: center;

            .img {
                width: 30px;
                height: 30px;
                background: #fff;
                border-radius: 50%;
            }

            .name {
                color: #fff;
                font-size: 16px;
                margin-left: 10px;
            }
        }

        .change {
            width: 20%;
            display: flex;
            align-items: center;
            text-align: center;
            color: #fff;
            font-size: 13px;
        }
    }

    .addbtn {
        width: 95%;
        height: 40px;
        background: #fff;
        border-radius: 12px;
        margin: 10px auto;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 15px;
        color: #1ba9ba;
        box-shadow: 0px 0px 5px 1px #ccc;
    }

    .content {
        width: 95%;
        height: 300px;
        background: #fff;
        margin: 10px auto;
        border-radius: 12px;
        box-shadow: 0px 0px 5px 1px #ccc;

        .contentbox {
            width: 80%;
            height: 300px;
            margin: 0 auto;

            .box {
                width: 100%;
                height: 40px;
                border-bottom: 1px solid #ccc;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: space-between;

                span {
                    width: 20%;
                    font-size: 14px;
                }

                .b1 {
                    width: 70%;
                    height: 30px;
                    margin-left: 10px;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    text-align: center;
                }

                input {
                    width: 70%;
                    height: 30px;
                    border: none;
                    margin-left: 10px;
                    outline: none;
                }

                .inp1 {
                    font-weight: bold;
                }
            }

            .tipbox {
                width: 100%;
                height: 50px;
                font-size: 12px;
                color: #666;
                margin-top: 20px;

                .or1 {
                    color: red;
                }
            }
        }
    }

    .tips {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        color: #666;
        font-size: 12px;
    }

    .surebtn {
        width: 95%;
        height: 40px;
        background: #1ba9ba;
        margin: 100px auto;
        border-radius: 15px;
        color: #fff;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
}

// 订单详情
.detail {
    width: 100%;
    height: 100%;
    position: relative;
    background: #F5F5F5;

    header {
        width: 100%;
        height: 250px;
        background: #00ACBD;
        border-radius: 0px 0px 20px 20px;
        color: #fff;

        .back {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;

            span {
                flex: 1;
                display: flex;
                align-items: center;
                margin-left: 10px;
            }

            .listdeatil {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .information {
            width: 95%;
            margin: 0 auto;
            height: 60px;
            margin-top: 40px;
            display: flex;
            align-items: center;

            span {
                width: 20%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            div {
                margin-right: 5px;

                p {
                    font-size: 12px;
                    margin-top: 5px;
                }
            }
        }

        .paymentdiv {
            width: 95%;
            margin: 0 auto;
            height: 60px;
            margin-top: 40px;
            display: flex;
            align-items: center;
            background: #ffff;
            border-radius: 10px;

            h3 {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                padding-left: 15px;
                color: #F50000;
            }

            p {
                display: flex;
                align-items: center;
                color: #000;

                .settime {
                    margin-top: 3px;
                    font-size: 20px;
                    margin-left: 5px;

                    .block {
                        color: #FF7A00;
                    }
                }

            }
        }
    }

    .mack {
        display: none;
    }

    .notice {
        width: 95%;
        margin: 0 auto;
        height: 80px;
        background: #ffff;
        margin-top: 160px;
        border-radius: 10px;

        p {
            width: 90%;
            height: 50%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .p1 {
            border-bottom: 1px solid #E6E6E6;

        }
    }

    .vote {
        width: 95%;
        margin: 0 auto;
        height: 80px;
        background: #ffff;
        margin-top: 10px;
        border-radius: 10px;

        p {
            width: 90%;
            height: 50%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .p1 {
            border-bottom: 1px solid #E6E6E6;

        }
    }

    .footer {
        width: 100%;
        height: 80px;
        background: #ffff;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;

        button {
            width: 90%;
            margin-top: 10px;

        }
    }

    .orderdetails {
        width: 95%;
        margin: 0 auto;
        height: 240px;
        position: absolute;
        top: 160px;
        left: 10px;
        background: #fff;
        border-radius: 10px;
        font-size: 14px;

        .collection {
            width: 90%;
            margin: 0 auto;
            height: 35px;

            p {
                width: 100%;
                height: 35px;
                display: flex;
                align-items: center;
            }
        }

        .dataday {
            width: 90%;
            margin: 0 auto;
            display: flex;
            height: 20px;
            justify-content: space-between;
        }

        .times {
            width: 90%;
            margin: 0 auto;
            display: flex;
            height: 20px;
            justify-content: space-between;
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 24px;

            div {
                display: flex;

                span {
                    width: 65px;
                    height: 20px;
                    border: 1px solid #ccc;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }
            }
        }

        .citys {
            width: 90%;
            margin: 0 auto;
            display: flex;
            height: 20px;
            justify-content: space-between;
            margin-bottom: 5px;

            span {
                display: flex;
                align-items: center;
            }
        }

        .passengerinformation {
            width: 90%;
            margin: 0 auto;
            height: 100px;
            background: #F5F5F5;
            margin-top: 10px;
            border-radius: 10px;

            p {
                display: flex;
                justify-content: space-between;
                padding: 5px;

                .suuse {
                    color: #00B353;
                }

                .payment {
                    color: #E02020;
                }
            }

        }
    }
}

// 
.trainquery {
    width: 100%;
    height: 100%;
    background: #F5F5F5;

    header {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #00ACBD;
        color: #fff;

        span {
            margin-left: 10px;
        }
    }

    main {
        width: 100%;
        height: calc(100% - 100px);
        overflow: auto;

        .allcon {
            width: 100%;
            background-color: #fff;
            margin-top: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .citys {
                width: 90%;
                margin: 0 auto;
                display: flex;
                height: 20px;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 3px;
                .marginbottom{
                    border-bottom: 1px solid #ccc;
                }
                .colors{
                    color: #ECA455;
                }
                .colors1{
                    color: red;
                }
                .colors2{
                    color: #00B353;
                }
                span{
                    width: 20%;
                    text-align: center;
                }
            }
        }

    }
    footer{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: #00ABBC;

        button{
            width: 30%;
            height: 35px;
            border: none;
            outline: none;
            border-radius: 5px;
            color: #fff;
            background-color: #00ABBC;
    
        }
    }
}

.paymentdetails {
    width: 100%;
    height: 100%;
    background-color: #E6E6E6;

    header {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #00ACBD;
        color: #fff;

        span {
            margin-left: 10px;
        }
    }

    main {
        width: 100%;
        height: calc(100% - 50px);

        p {
            padding-left: 10px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .picy {
            width: 100%;
            height: 300px;
            background: #389cc0;
            margin-top: 20px;
            color: #fff;

            .vote {
                width: 95%;
                margin: 0 auto;
                margin-top: 10px;
                border-radius: 10px;

                p {
                    width: 90%;
                    height: 75px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .p1 {
                    border-bottom: 1px solid #E6E6E6;

                }
            }
        }

        .button {
            width: 90%;
            margin: 0 auto;
            display: flex;
            height: 50px;
            background: #fff;
            border-radius: 10px;
            justify-content: space-evenly;
            align-items: center;

            button {
                height: 30px;
            }
        }
    }
}